<template>
  <div class="app-container">
    <div class="table-container">
      <div class="left">
        <el-form :inline="true" :model="params">
          <el-form-item label="">
            <el-input v-model="params.countryCode" style="width:300px;" type="text" placeholder="请输入国家代码"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleCurrentChange(1)">查询</el-button>
          </el-form-item>
          <el-form-item>
             <div class="importExcel">
                <el-button class="btnExcel" type="success">导入</el-button>
                <input type="file" class="fileExcel" ref="fileExcel" @change="importExcel($event.target)" />
              </div>
          </el-form-item>
        </el-form>
        <!-- <el-button @click="handleOpen">添加</el-button> -->
      </div>
      <div class="right">

      </div>
    </div>
    <div class="_list">
      <el-table highlight-current-row @selection-change="handleSelectionChange" :data="dataList" style="width: 100%" v-loading.body="listLoading">
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column label="国家代码">
          <template slot-scope="scope">
            {{scope.row.countryCode}}
          </template>
        </el-table-column>
        <el-table-column label="国家名称">
          <template slot-scope="scope">
            {{scope.row.countryName}}
          </template>
        </el-table-column>
        <el-table-column label="月租价格">
          <template slot-scope="scope">
            {{scope.row.monthPrice}}欧元/月
          </template>
        </el-table-column>
        <el-table-column label="呼入" align="center" width="300">
          <template slot-scope="scope">
            <div class="inPriceCost">
              <span>成本</span>
              <span>价格</span>
            </div>
            <div class="inPriceCost">
              <span>{{scope.row.inPriceCost}}欧元/分</span>
              <span>{{scope.row.inPrice}}欧元/分</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="呼出" align="center" width="300">
          <template slot-scope="scope">
            <div class="inPriceCost">
              <span>成本</span>
              <span>固话</span>
              <span>手机</span>
            </div>
            <div class="inPriceCost">
              <span>{{scope.row.outPriceCost}}欧元/分</span>
              <span>{{scope.row.telOutPrice}}欧元/分</span>
              <span>{{scope.row.mobileOutPrice}}欧元/分</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="280" align="center">
          <template slot-scope="scope">
            <el-button @click="handleUpdata(scope.row)" type="text">编辑</el-button>
            <el-button @click="handleDelete(scope.row)" type="text">删除</el-button>
           </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pages">
      <div class="left">
        <el-tooltip class='item' effect='dark' content='批量删除' placement='top'>
          <el-button size="small" @click="handleAll" type="danger">批量删除</el-button>
        </el-tooltip>
      </div>
      <div class="right" v-if="total > 0">
        <el-pagination @current-change="handleCurrentChange" background :current-page.sync="page" layout="total, prev, pager, next" :total="total">
        </el-pagination>
      </div>
    </div>
    <el-dialog title="价格配置" :visible.sync="dialogVisible" width="500px" top="5vh">
      <el-form ref="dialogForm" :model="form" :rules="dialogFormRules" label-width="110px">
        <el-form-item label="国家代码" prop="countryCode">
          <el-input v-model="form.countryCode"></el-input>
        </el-form-item>
        <el-form-item label="国家名称" prop="countryName">
          <el-input v-model="form.countryName"></el-input>
        </el-form-item>
        <el-form-item label="月租价格" prop="monthPrice">
          <el-input v-model="form.monthPrice"></el-input>
        </el-form-item>
        <el-form-item label="呼入成本" prop="inPriceCost">
          <el-input v-model="form.inPriceCost"></el-input>
        </el-form-item>
         <el-form-item label="呼入价格" prop="inPrice">
          <el-input v-model="form.inPrice"></el-input>
        </el-form-item>
        <el-form-item label="呼出价格(固话)" prop="telOutPrice">
           <el-input v-model="form.telOutPrice"></el-input>
        </el-form-item>
        <el-form-item label="呼出价格(手机)" prop="mobileOutPrice">
          <el-input type="input" v-model="form.mobileOutPrice"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCancel">取 消</el-button>
        <el-button type="primary" @click="handleSubmit('dialogForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import mixinsTable from '@/utils/mixins.table';
export default {
  name: 'priceconfiguration',
  mixins: [mixinsTable],
  data() {
    return {
      form: {},
      servicePath: '/nexmo/price',
      showFileList: false,
      uploadData: {
        model: 'price'
      },
      tableTbody: [],
      dialogFormRules: {
        countryCode: [
          { required: true, message: '国家代码不能为空', trigger: 'blur' }
        ],
        countryName: [
          { required: true, message: '国家名称不能为空', trigger: 'blur' }
        ],
        inPrice: [
          { required: true, message: '呼入价格不能为空', trigger: 'blur' }
        ],
        telOutPrice: [
          { required: true, message: '呼出价格(固话)不能为空', trigger: 'blur' }
        ],
        mobileOutPrice: [
          { required: true, message: '呼出价格(手机)不能为空', trigger: 'blur' }
        ]
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    initForm(row) {
      this.setFormVal(row);
    },
    FormClear() {
      this.setFormVal(this.form);
    },
    setFormVal(row) {
      const formArr = Object.keys(row);
      formArr.map(item => {
        this.$set(this.form, item, this.dialogState === 'update' ? row[item] : '');
      });
    },
    priceImport() {

    },
    handleAvatarSuccess(res, file) {
      // this.imageUrl = URL.createObjectURL(file.raw);
      console.log(file);
    },
    importExcel(obj) {
      let file = obj.files[0];
      let types = file.name.split('.')[1];
      console.log(types);
      let fileType = ['xlsx', 'xlc', 'xlm', 'xls', 'xlt', 'xlw', 'csv'].some(item => item === types);
      if (!fileType) {
        this.$message.warning('格式错误！请重新选择');
        this.$refs.fileExcel.value = '';
        return;
      }
      this.listLoading = true;
      var files = new FormData();
      files.append('file', file);
      files.append('price', 'price');
      this.$API.importExcel(files).then((data) => {
        if (data.code === 200) {
          this.getList();
          this.listLoading = false;
          this.$message.success('导入成功!');
        }
        this.$refs.fileExcel.value = '';
      }).catch((err) => {
        if (err) {
          this.listLoading = false;
          this.$refs.fileExcel.value = '';
        }
      });
    },
    handleCurrentChange(val) {
      this.getList(val);
    }
  }
};
</script>
<style lang="scss">
.priceAccount{
  color:red;
  font-size:14px;
  margin-right: 50px;
}
.inPriceCost{
  display: flex;
  span{
    flex: 1;
    display: block;
  }
}
.importExcel{
  position: relative;
  .btnExcel{
    position: absolute;
    left:0;
    right: 0;
  }
  .fileExcel{
    opacity: 0;
    width:56px;
    height: 32px;
    z-index: 999;
  }
}
</style>
